<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>弹性盒子案例-扩展量_渐变</title>
		<link rel="stylesheet" type="text/css" href="awesome/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
	</head>
	<style>
		#bg {
			width: 99vw;
			height: 99vh;
			overflow: hidden;
			border: 1px solid red;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
		}
		
		#d1 {
			/* 弹性 压缩宽度*/
			display: flex;
			width: 100vw;
			height: 50px;
			/*background-image: linear-gradient(to right,gray,white);*/
			/*渐变*/
			background-image: linear-gradient(to right, rgb(0, 151, 255), rgb(0, 89, 255), rgb(100, 151, 255));
			justify-content: center;
			align-items: center;
			/*背景颜色*/
			/*background-color: rgb(0,151,255);*/
			/*flex:1;*/
		}
		
		#d2 {
			/* 弹性 压缩宽度*/
			width: 100vw;
			height: 200px;
			flex: auto;
		}
		
		#d3 {
			/* 弹性 压缩宽度*/
			width: 100vw;
			height: 80px;
			/*flex:1;*/
			border-top: 3px solid gray;
			display: flex;
			justify-content: space-between;
		}
		
		#head {
			color: white;
			font-size: 36px;
			width: 200px;
			text-align: justify;
			display: flex;
			/* 文本对齐方式  */
			justify-content: space-around;
		}
		
		#d3 > div {
			flex: auto;
			justify-content: center;
			align-items: center;
			margin: auto;
			padding: auto;
		}
		
		#d3 > div > div {
			text-align: center
		}
		
		#d3 > div:hover {
			color: red;
		}
	</style>

	<body>
		<!--弹性盒子-->
		<div id="bg">
			<!--弹性子元素-->
			<div id="d1">
				<div id="head">
					<span>登</span><span>陆</span>
				</div>
			</div>
			<div id="d2">
				2
			</div>
			<div id="d3">
				<div id="main">
					<div>
						<i class="fa fa-home fa-2x"></i>
					</div>
					<div id="mainText">
						首页
					</div>
				</div>
				<div id="discovery">
					<div>
						<i class="fa fa-eye fa-2x"></i>
					</div>
					<div style="text-align: center;">
						发现
					</div>
				</div>
				<div id="order">
					<div>
						<i class="fa fa-shopping-bag fa-2x"></i>
					</div>
					<div style="text-align: center;">
						订单
					</div>
				</div>
				<div id="myself">
					<div>
						<i class="fa fa-user fa-2x"></i>
					</div>
					<div style="text-align: center;">
						我的
					</div>
				</div>
			</div>
		</div>

	</body>

</html>